<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向属性</title>
		<!-- 垂直方向属性 vertical-align
		 功能：1.应用于表格中单元格【栅格布局】
		      2.行内元素与行内块元素对齐方式
			  理解：文本和图片对齐方式【垂直居中】
			  元素种类：
			  行内元素：典型行内元素 span、a、文本
			  特点：在一行内显示、不可设置宽高
			  块级元素：典型块元素 div、p
			  特点：独占一行、可设宽高
			  行内块元素：典型行内块元素  img
			  特点：在一行内显示、可设宽高
			  页面组成：元素之间嵌套生成
			  三种元素相互嵌套  √  嵌套根据元素特点页面混乱
			  嵌套条件1：在一行内显示【效果】
			           块套行    √    推荐
					   行套行    √
					   行套块    √   增加条件，块添加宽高,造成页面布局混乱   ×
					   块套块    √
			  嵌套条件2：独占一行【效果】
			           块套行    √   推荐 
			           行套行    X
			           行套块    X   混乱
			           块套块    √
		-->
		<style>
			/*抓每个img
			派生（后代）选择器：
			抓取父元素中所有（后代）子元素 【元素嵌套特点】
			伪类选择器：
			特点：在选择器后，过滤符合“特定条件”某个元素
			nth-child:选中父元素中第N个
			符合条件：p中包含4个img
			id抓取父元素：空间大
			class抓取父元素中某个子元素：微调
			*/
			img:nth-child(1){
				border: 10px solid red;
			img:nth-child(2){
				border: 10px solid red;
				}
				/*标准抓取每个img方案*/
				p img: .baseline{
					vertical-align: baseline;
				}	
				p img: .top{
					vertical-align: top;
				}	
				p img: .middle{
					vertical-align: middle;
				}
				/*vertical-align与text-align区别
				区别1：属性值不同
				    2：vertical-align操作文本和图片垂直
					   text-align操作文本左右和居中以及两边对齐*/
				p img.botton{
					vertical-align: botton;
				}
		</style>
		
	</head>
	<body>
		<h1>垂直方向属性使用【针对元素种类】</h1>
		<p>哪吒<img class="baseline" src="img/img_1.png" alt="哪吒" width="100px" height="100px"/>基线对齐</p>
		<p>魔丸<img class="top" src="img/img_2.png" alt="魔丸" width="100px" height="100px"/>顶部对齐</p>
		<p>小新<img class="middle" src="img/img_3.png" alt="小新"  width="100px" height="100px"/>中间对齐</p>
		<p>太乙<img class="botton" src="img/img_4.png" alt="太乙"  width="100px" height="100px"/>底部对齐</p>
		<!-- 需求：垂直方向属性  4个属性值
		         如果，不改变现有html结构，可以找到依次4个img
				 抓每个---4个图片
			思路：派生选择器+伪类选择器	 
		-->
	    
	</body>
</html>